<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>盒子模型</title>
		<style type="text/css">
			.boxl{
				/* border:边框 
				solid:实线        dashed:虚线     dotted:点线
				top:上        bottom:下		left:左			right:右
				margin:外边距
				padding:内边距
				width:宽		heigth:高
				单位:px像素
				颜色的三种表示:颜色的英语单词,rgh(0~255,0~255,0~255),#000000  
				*/
				/* 边框：大小1px 实线 边框颜色红色 */
				border-top: 5px rgb(red, green, blue)
				border-bottom: 5px #ffff00 solid;
				border-left: 5px solid blue;
				border-right: 5px dashed yellowgreen;
				border: 1px solid red;
				width: 200px;       /* 宽  */
				height: 200px;		/*  高  */
				font-size: 36px;	/*  font：字体    size：大小  */
				padding-top: 30px;
				padding-left: 30px;
				padding-bottom: 30px;
				padding-right: 30px;
				/* 复合写法 ：顺时针方向（上右下左）
				四个值：上 右 下 左
				三个值：上  左/右  下
				两个值：上/下    左/右
				一个值：上/下/左/右
				 */
				padding: 10px 20px 30px 40px;
			}
			.box2{
				border: 1px solid green;
				width: 200px;
				height: 200px;
			}
		</style>
	</head>
	<body>
		<div class="boxl">hello world!</div>
		<div class="box2">hello box</div>
	</body>
</html>
